<!-- 分类 -->
<template>
  <div>
    <!-- 标题栏 -->
    <MainNavBar title=""> </MainNavBar>
    <van-tabs v-model="activeKey" swipeable @change="getDataList">
      <van-tab name="1" :badge="pagination1.total | BadgeFilter"
        ><template #title> <van-icon name="envelop-o" /> 通知 </template>
        <van-pull-refresh v-model="loading" @refresh="getDataList">
          <van-list v-model="loading" :finished="!loading">
            <van-cell
              v-for="item in data1"
              :key="item.Id"
              @click="selectData1(item.Id)"
            >
              <template #icon>
                <van-popover
                  theme="dark"
                  trigger="click"
                  placement="right"
                  v-model="item.popover"
                >
                  <div style="margin: 5px;">
                    <p>{{ item.CreatorName }}</p>
                  </div>

                  <template #reference>
                    <van-image
                      width="36"
                      height="36"
                      round
                      alt="avatar"
                      :src="item.Avatar | AvatarFilter"
                    />
                  </template>
                </van-popover>
              </template>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span>{{ item.Title }}</span>
              </template>

              <template #label>
                <span>{{ item.CreateTime }}</span>
              </template>
            </van-cell>
          </van-list>
          <div style="text-align:center;  margin-top:10px; font-size:20px">
            <router-link :to="{ path: '/D_Manage/D_UserMail/Index' }"
              >查看更多</router-link
            >
          </div>
        </van-pull-refresh>
      </van-tab>
      <van-tab name="2" :badge="pagination2.total | BadgeFilter">
        <template #title> <van-icon name="chat-o" /> 消息 </template>
        <van-pull-refresh v-model="loading" @refresh="getDataList">
          <van-list v-model="loading" :finished="!loading">
            <van-cell
              v-for="item in data2"
              :key="item.Id"
              @click="selectData2(item)"
            >
              <template #icon>
                <van-popover
                  theme="dark"
                  trigger="click"
                  placement="right"
                  v-model="item.popover"
                >
                  <div style="margin: 5px;">
                    <p>{{ item.CreatorName }}</p>
                  </div>

                  <template #reference>
                    <van-image
                      width="36"
                      height="36"
                      round
                      alt="avatar"
                      :src="item.Avatar | AvatarFilter"
                    />
                  </template>
                </van-popover>
              </template>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span>{{ item.Text }}</span>
              </template>

              <template #label>
                <span>{{ item.CreateTime }}</span>
              </template>
            </van-cell>
          </van-list>
          <div style="text-align:center; margin-top:10px; font-size:20px">
            <router-link :to="{ path: '/D_Manage/D_UserMessage/List' }"
              >查看更多</router-link
            >
          </div>
        </van-pull-refresh>
      </van-tab>
      <van-tab name="3" :badge="pagination3.total | BadgeFilter">
        <template #title> <van-icon name="underway-o" /> 待办 </template>
        <van-pull-refresh v-model="loading" @refresh="getDataList">
          <van-list v-model="loading" :finished="!loading">
            <van-cell
              v-for="item in data3"
              :key="item.Id"
              @click="selectData3(item.Id, item.DefFormName)"
            >
              <template #icon>
                <van-popover
                  theme="dark"
                  trigger="click"
                  placement="right"
                  v-model="item.popover"
                >
                  <div style="margin: 5px;">
                    <p>{{ item.CreatorName }}</p>
                  </div>

                  <template #reference>
                    <van-image
                      width="36"
                      height="36"
                      round
                      alt="avatar"
                      :src="item.Avatar | AvatarFilter"
                    />
                  </template>
                </van-popover>
              </template>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span>{{ item.Text }}</span>
              </template>

              <template #label>
                <span>{{ item.CreateTime }}</span>
              </template>
            </van-cell>
          </van-list>
          <div style="text-align:center;  margin-top:10px; font-size:20px">
            <router-link :to="{ path: '/OA_Manage/OA_UserForm/List' }"
              >查看更多</router-link
            >
          </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

    <edit-form1
      ref="editForm1"
      :parentObj="this"
      :afterSubmit="getDataList"
    ></edit-form1>
    <edit-form3
      ref="editForm3"
      :parentObj="this"
      :afterSubmit="getDataList"
    ></edit-form3>
  </div>
</template>

<script>
import MainNavBar from "@/components/MainNavBar";
import EditForm1 from "@/views/D_Manage/D_UserMail/EditForm";
import EditForm3 from "@/views/OA_Manage/OA_UserForm/EditForm";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import {
  D_UserMail_GetPageHistoryDataList,
  D_UserMessage_GetPageHistoryGroupDataList,
  OA_UserForm_GetPageHistoryDataList
} from "@/api";

export default {
  name: "Categories",
  components: {
    MainNavBar,
    EditForm1,
    EditForm3
  },
  props: {},
  mounted() {
    this.getConfigResult(this.pushmessagedetail);
    this.getDataList();
  },
  data() {
    return {
      loading: false,
      activeKey: "1",
      data1: [],
      data2: [],
      data3: [],
      pagination1: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      pagination2: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      pagination3: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      totalcount: 0,
      sorter: { field: "CreateTime", order: "desc" }
    };
  },
  computed: { ...mapGetters(["userInfo", "pushmessagedetail"]) },
  watch: {
    pushmessagedetail: {
      handler: function(val, oldval) {
        this.getConfigResult(val);
      },
      deep: true
    }
  },
  methods: {
    ...mapMutations(["SET_PushmessageTotal"]),
    getDataList() {
      this.loading = true;
      if (this.activeKey === "1") {
        var queryParam1 = {
          userId: this.userInfo.Id,
          markflag: true
        };

        D_UserMail_GetPageHistoryDataList({
          PageIndex: this.pagination1.current,
          PageRows: this.pagination1.pageSize,
          SortField: this.sorter.field || "Id",
          SortType: this.sorter.order,
          Search: queryParam1
        }).then(resJson => {
          this.loading = false;
          this.data1 = resJson.Data;
          const pagination = { ...this.pagination1 };
          pagination.total = resJson.Total;
          this.pagination1 = pagination;
          this.setTotal();
        });
      } else if (this.activeKey === "2") {
        var queryParam2 = {
          userId: this.userInfo.Id,
          markflag: true
        };

        D_UserMessage_GetPageHistoryGroupDataList({
          PageIndex: this.pagination2.current,
          PageRows: this.pagination2.pageSize,
          SortField: this.sorter.field || "Id",
          SortType: this.sorter.order,
          Search: queryParam2
        }).then(resJson => {
          this.loading = false;
          this.data2 = resJson.Data;
          const pagination = { ...this.pagination2 };
          pagination.total = eval(
            resJson.Data.map(item => item.Total).join("+")
          );
          this.pagination2 = pagination;
          this.setTotal();
        });
      } else if (this.activeKey === "3") {
        var queryParam3 = {
          userId: this.userInfo.Id
        };

        OA_UserForm_GetPageHistoryDataList({
          PageIndex: this.pagination3.current,
          PageRows: this.pagination3.pageSize,
          SortField: this.sorter.field || "Id",
          SortType: this.sorter.order,
          Search: queryParam3
        }).then(resJson => {
          this.loading = false;
          this.data3 = resJson.Data;
          const pagination = { ...this.pagination3 };
          pagination.total = resJson.Total;
          this.pagination3 = pagination;
          this.setTotal();
        });
      }
    },
    getConfigResult(res) {
      // 接收回调函数返回数据的方法
      if (res) {
        let resmsg = res;
        this.pagination1.total = resmsg.UserMailCount;
        this.pagination2.total = resmsg.UserMessageCount;
        this.pagination3.total = resmsg.UserFormCount;
      }
    },
    setTotal() {
      this.SET_PushmessageTotal(
        this.pagination1.total + this.pagination2.total + this.pagination3.total
      );
    },
    selectData1(id) {
      this.$refs.editForm1.openForm(id);
    },
    selectData2(item) {
      this.$router.push({
        name: "/D_Manage/D_UserMessage/ChatForm",
        params: {
          title: item.GroupName || item.CreatorName,
          message: JSON.stringify(item)
        }
      });
    },
    selectData3(id, name) {
      this.$refs.editForm3.openForm(id, name);
    }
  }
};
</script>

<style scoped lang="less"></style>
